<template>
    <nav>
        <div class="level" :class="{ active: mine.level == level.id }" v-for="level in mine.levelList" :key="level.id"
            @click="mine.setLevel(level.id)">
            {{ level.name }}
        </div>
    </nav>
</template>

<script setup lang="ts">
import mineStore from '@/store/mine'
import { onMounted } from 'vue'

const mine = mineStore()
onMounted(() => {
    mine.createMineList()
})
</script>

<style lang="scss" scoped>
nav {
    display: flex;
    gap: 10px;

    .level {
        padding: 2px 10px;
        cursor: pointer;
        border-width: 2px;
        border-style: solid;
        border-left-color: var(--border-color-light);
        border-top-color: var(--border-color-light);
        border-right-color: var(--border-color-dark);
        border-bottom-color: var(--border-color-dark);

        &.active {
            border-left-color: var(--border-color-dark);
            border-top-color: var(--border-color-dark);
            border-right-color: var(--border-color-light);
            border-bottom-color: var(--border-color-light);
        }
    }
}
</style>